{% extends 'base.html' %}

{% load staticfiles %}

{% block title %}菜谱-学厨网{% endblock %}
{% block content %}
    <div class="container" style="margin-top: 70px;">
        <ol class="breadcrumb">
            <li><a href="{% url 'index' %}">首页</a></li>
            <li><a href="{% url 'cookbook:cookbook_list' %}">菜谱</a></li>
            <li class="active">{{ menu_detail_type }}</li>
        </ol>
    </div>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="page-header" style="margin-top: 10px;">
                    <h4>分类</h4>
                </div>
                <ul class="nav nav-pills" role="tablist">
                    {% for menu_type in all_menu_type %}
                        <li role="presentation"
                            {% ifequal menu_detail_type.id menu_type.id %}class="active"{% endifequal %}>
                            <a href="{% url 'cookbook:cookbook_list_classify' menu_type.id %}">{{ menu_type.name }}
                                <span
                                        class="badge">{% if menu_type.number %}{{ menu_type.number }}{% endif %}</span>
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <!-- Example row of columns -->
        <div class="col-lg-8">
            <div class="page-header">

                <div class="clearfix">
                    <div class="pull-left">
                        <h2>{{ detail.name }}</h2>
                        <a href=""><span class="glyphicon glyphicon-tag"
                                         aria-hidden="true"></span>&nbsp;{{ detail.user }}</a>
                    </div>
                    <div class="pull-right">
                        {% if is_fav == True %}
                            <button type="button" class="btn btn-default" id="add-fav" style="margin-top: 20px;">已收藏
                            </button>
                        {% endif %}
                        {% if is_fav == False %}
                            <button type="button" class="btn btn-primary" id="add-fav" style="margin-top: 20px;">收藏
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="row">
                <img src="{{ MEDIA_URL }}{{ detail.image }}" class="col-sm-10">
            </div>
            <div class="page-header">
                <h3>原料</h3>
            </div>
            {{ detail.ingredients }}
            <div class="page-header">
                <h3>制作过程</h3>
            </div>
            <p>{{ detail.details | safe }}</p>

        </div>
        <div class="col-lg-4">
            <div style="margin-top: 40px;">
                {% for ad in ad_image %}
                    <a href="{{ ad.url }}"><img class="img-responsive center-block"
                                                src="{{ MEDIA_URL }}{{ ad.image }}" alt="..."></a>
                {% endfor %}
            </div>
            <div class="page-header">
                <h3>热门菜品</h3>
            </div>
            <div style="margin-bottom: 20px;">
                {% for hot_menu in hot_menus %}
                    <a href="{% url 'cookbook:cookbook_detail' hot_menu.id %}"
                       class="list-group-item ">{{ hot_menu.name }}</a>
                {% endfor %}
            </div>

        </div>

    </div> <!-- /container -->
    <script>
        $(function () {
            $('#add-fav').on('click', function () {
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "{% url 'cookbook:cookbook_add_fav' %}",
                    data: {
                        menu_id: {{ detail.id }},
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function (data) {
                        if (data.status === 1) {
                            $('#add-fav').html('已收藏');
                            $('#add-fav').removeClass('btn-primary').addClass('btn-default');
                        }
                        else if (data.status === 2) {
                            $('#add-fav').html('收藏');
                            $('#add-fav').removeClass('btn-default').addClass('btn-primary');
                        }
                        else
                            window.location.href = "{% url 'login' %}";
                    }
                })
            })
        });

    </script>
{% endblock %}